<template>
<div class="goods-query">
    <el-card style="height: 70px;width: 100%;margin: 10px 0;">
        <el-form :model="filterParams" label-width="80px" :inline="true">
          <el-form-item>
            <el-input
              v-model="filterParams.keyword"
              placeholder="请输入关键词"
              suffix-icon="Search"
              @suffix-click="onSearch"
              @keyup.enter="onSearch"
              class="search-input"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filterParams.minPrice" placeholder="最低价格"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filterParams.maxPrice" placeholder="最高价格"></el-input>
          </el-form-item>
          <el-form-item class="custom-form-item">
            <el-tree-select
              v-model="filterParams.categoryId"
              :props="{ value: 'categoryId', label: 'categoryName', children: 'children' }"
              :data="categoryStore.categories"
              :render-after-expand="false"
              style="width: 240px"
              clearable
              placeholder="选择分类"
            >
              <template #default="{ data: { categoryName } }">
                {{ categoryName }}
              </template>
            </el-tree-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSearch">查询</el-button>
            <el-button @click="resetFilters">重置</el-button>
          </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue';
import { useCategoryStore } from '@/stores/category';
const categoryStore = useCategoryStore();
const filterParams = reactive({
  keyword: '',
  minPrice: '',
  maxPrice: '',
  categoryId: ''
});

const emits = defineEmits(['search']);
const onSearch = () => {
  emits('search', {
    ...filterParams
  });
};

const resetFilters = () => {
  filterParams.keyword = '';
  filterParams.minPrice = '';
  filterParams.maxPrice = '';
  filterParams.categoryId = '';
};
onMounted(() => {
  // 初始化时加载分类数据
  categoryStore.fetchCategories();
})
</script>

<style scoped lang="scss">
</style>
